<template>
	<view class="content">
		<view class="info">
			<view class="title">银行卡信息</view>
			<view class="item">
				<text><text class="require">*</text>持卡人姓名:</text>
				<input type="text" class="ipt" v-model="cardName" placeholder="请输入持卡人姓名"
					placeholder-class="input-style" />
			</view>
			<view class="item">
				<text><text class="require">*</text>银行卡号:</text>
				<input type="number" class="ipt" v-model="cardNumber" placeholder="请输入银行卡号"
					placeholder-class="input-style" />
			</view>
			<view class="item">
				<text><text class="require">*</text>开户银行:</text>
				<picker mode="selector" :range="bankList" @change="change" range-key="name">
					<text v-if="!bankName" class="input-style">请选择开户银行</text>
					<text v-else>{{ bankName }}</text>
					<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
				</picker>
			</view>
			<view class="item">
				<text><text class="require">*</text>身份证号:</text>
				<input type="number" class="ipt" v-model="idNumber" placeholder="请输入身份证号"
					placeholder-class="input-style" />
			</view>
			<view class="item">
				<text><text class="require">*</text>手机号:</text>
				<input type="number" class="ipt" v-model="tel" placeholder="请输入手机号" placeholder-class="input-style" />
			</view>
		</view>
		<view class="btnbox">
			<view class="btn">提交</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	const cardName = ref('')
	const cardNumber = ref('')
	const bankName = ref('')
	const idNumber = ref('')
	const tel = ref('')
	const bankList = reactive([{
		name: '招商银行'
	}, {
		name: '工商银行'
	}])
	const change = (e) => {
		bankName.value = bankList[e.detail.value].name
	}
</script>

<style lang="scss">
	.content {
		padding-top: 30rpx;

		.info {
			width: 700rpx;
			margin: 0 auto;
			padding: 0rpx 30rpx;
			box-sizing: border-box;
			background-color: #fff;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				padding: 20rpx 0;
			}

			.item {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				padding: 20rpx 0;
				border-top: 2rpx solid #f7f7f7;

				.ipt {
					text-align: right;
				}
			}
		}

		.btnbox {
			width: 100%;
			display: flex;
			justify-content: center;
			margin-top: 30rpx;

			.btn {
				width: 600rpx;
				height: 80rpx;
				background-color: #ffc400;
				line-height: 80rpx;
				text-align: center;
				border-radius: 10rpx;
				font-size: 28rpx;
			}
		}
	}
</style>